<template>
   <div class="container">
        <header>
            <!-- <img src="images/banner4.png"> -->
            <div class="swiper-container">
                <div class="swiper-wrapper" v-if="houseInfo.albumList.length"> 
                    <div class="swiper-slide" v-for="(val,key) in houseInfo.albumList" :key="key">
                        <img :src="val.imgPath">
                    </div>
                </div>
            </div>
            <!-- 悬浮按钮 -->
            <a class="down" href="javascript:window.history.back()"><span class="icon">&#xe63f;</span></a>
            <a class="collection" href="#"><span class="icon">&#xe639;</span></a>
            <a class="share" href="#"><span class="icon">&#xe607;</span></a>
            <p class="num"></p>
        </header>
        <div class="top">
            <h1>{{houseInfo.name}}</h1>
            <h3>{{houseInfo.desc}}</h3>
            <p>
                <span>2000</span>
                <span>元/月</span>
                <span>服务费:130元</span>
            </p>
        </div>
        <section class="content">
            <h1>基本信息</h1>
            <div class="info">
                <dl>
                    <dt>入住</dt>
                    <dd>{{houseInfo.baseInfo.live}}</dd>
                    <dt>面积</dt>
                    <dd>{{houseInfo.baseInfo.area}}</dd>
                    <dt>户型</dt>
                    <dd>{{houseInfo.baseInfo.model}}</dd>
                    <dt>发布</dt>
                    <dd>{{houseInfo.baseInfo.pubtime}}</dd>
                    <dt>楼层</dt>
                    <dd>{{houseInfo.baseInfo.floor}}</dd>
                    <dt>装修</dt>
                    <dd>{{houseInfo.baseInfo.decorate}}</dd>
                    <dt>车位</dt>
                    <dd>{{houseInfo.baseInfo.stall}}</dd>
                    <dt>付款</dt>
                    <dd>{{houseInfo.baseInfo.payment}}</dd>
                    <dt>小区</dt>
                    <dd>{{houseInfo.baseInfo.plot}}</dd>
                </dl>
                <p><a href="#">查看小区</a></p>
            </div>
            <h1>配套设施</h1>
            <ul class="facilities">
                <li :class="houseInfo.facility.bed === 'false'?'none':''"><span class="icon">&#xe60c;</span>
                    <p>床</p>
                </li>
                <li :class="houseInfo.facility.washer === 'false'?'none':''"><span class="icon">&#xec78;</span>
                    <p>洗衣机</p>
                </li>
                <li :class="houseInfo.facility.refrigerator === 'false'?'none':''"><span class="icon">&#xe90b;</span>
                    <p>冰箱</p>
                </li>
                <li :class="houseInfo.facility.conditioner === 'false'?'none':''"><span class="icon">&#xe60e;</span>
                    <p>空调</p>
                </li>
                <li :class="houseInfo.facility.wifi === 'false'?'none':''"><span class="icon">&#xe6a4;</span>
                    <p>wifi</p>
                </li>
                <li :class="houseInfo.facility.sofa === 'false'?'none':''"><span class="icon">&#xe724;</span>
                    <p>沙发</p>
                </li>
                <li :class="houseInfo.facility.tablesChair === 'false'?'none':''"><span class="icon">&#xe666;</span>
                    <p>桌椅</p>
                </li>
                <li :class="houseInfo.facility.tv === 'false'?'none':''"><span class="icon">&#xe67d;</span>
                    <p>电视</p>
                </li>
                <li :class="houseInfo.facility.calorifier === 'false'?'none':''"><span class="icon">&#xe67f;</span>
                    <p>热水器</p>
                </li>
                <li :class="houseInfo.facility.cook === 'false'?'none':''"><span class="icon">&#xe60d;</span>
                    <p>可做饭</p>
                </li>
                <li :class="houseInfo.facility.heating === 'false'?'none':''"><span class="icon">&#xe90d;</span>
                    <p>暖气</p>
                </li>
                <li :class="houseInfo.facility.balcony === 'false'?'none':''"><span class="icon">&#xe622;</span>
                    <p>阳台</p>
                </li>
            </ul>
            <h1>附近位置</h1>
            <!-- <img src="images/4.jpg"> -->
            <div class="map" id="allmap" style="width: 100%;height: 3.29rem;overflow: hidden;margin:0"></div>
            <h1>附近房源</h1>
            <ul class="case">
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="homedetails.html">
                        <img src="images/5.jpg" class="fl">
                        <div class="text fr">
                            <h1>包图软件园二期押一付三</h1>
                            <p>套二 50m2 距包图大道地铁站1 .2km</p>
                            <ul>
                                <li class="active">在线签约</li>
                                <li>近地铁</li>
                                <li>精装修</li>
                            </ul>
                            <p>2100<span>元/月</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </section>
        <footer>
            <div class="left"><img class="fl" src="images/touxiang.png" alt="">
                <p class="fl">包图君</p><span>个人</span>
            </div>
            <div class="phone"><a href="tel:13800138000">电话咨询</a></div>
        <div class="right">
            <router-link :to="{name:'appoint',query:{hid:houseInfo.hid}}">
                <a href="javascript:;">立即预约</a>
            </router-link>
        </div>
            <div class="clear"></div>
        </footer>
        
    </div>
</template>

<script type="text/ecmascript-6">

// 加载swiper模块
    import Swiper from 'swiper';
    import $ from 'jquery';


  export default {
    name: 'detail',
    data () {
      return {
        //   广告图数据
       
      }
    },
    components: {

    },
    mounted() {
        // console.log(1)
        
        //接受url地址的hid
       let hid =  this.$route.params.hid;
       let type =  this.$route.params.type;
       console.log(type);
       //查询当前房源信息
       this.$store.dispatch('getOneHouse',{h:hid,t:type});

        //    广告图

        //     let _this = this;
        //    this.$axios({
        //        methods:"get",
        //        url:"/data/house_data.json"
        //    }).then(function(res) {
        //        console.log(res);
        //        let data = res.data;
        //        if(data.code == 200) {
        //         _this.adList = data.albumList;
        //        }
        //    }).catch((error) =>{
        //        console.log(error);
        //    });

    },

    updated(){
        // console.log(2)
        this.init();

        //地图
        this.getmap();
    },
    
    methods: {
         // 初始化的方法
        init(){
            // 调用Swiper
            new Swiper ('.swiper-container', {
                pagination: {
                    el: '.num',
                    type: 'fraction',
                },
                loop: true,
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            })
            //把页面滚动条定位到顶部
            $(window).scrollTop(0);
        },
        getmap() {
             var map = new window.BMap.Map("allmap");
            var point = new window.BMap.Point(116.331398, 39.897445);
            map.centerAndZoom(point, 12);

            var geolocation = new window.BMap.Geolocation();
            geolocation.getCurrentPosition(
                function (r) {
                if (this.getStatus() == window.BMAP_STATUS_SUCCESS) {
                    var mk = new window.BMap.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    // alert('您的位置：'+r.point.lng+','+r.point.lat);
                } else {
                    // alert('failed'+this.getStatus());
                }
                },
                { enableHighAccuracy: true }
            );
        },
    },
    watch: {
        
    },
    computed: {
        // isShowNav(){
        //     this.$route.path; //detail
        //     if(this.$route.path === '/detail'){
        //         return false;
        //     }else{
        //         return true;
        //     }
        // }
        houseInfo(){

            // console.log(this.$store.state.index.house.name);
            if(this.$store.state.index.house.name === undefined){
             return {
                 baseInfo:{},
                 facility:{},
                 albumList:[]
             }  
            }else{
                 return this.$store.state.index.house;
            }
           
        },
        
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
// @import url("../assets/css/swiper.min.css");
header {
    position: relative;
    width: 100%;
    height: auto;
}

header img {
    width: 100%;
    height: auto;
    display: block;
}

header a {
    width: .64rem;
    height: .64rem;
    display: block;
    background-color: rgba(0, 0, 0, .2);
    text-align: center;
    line-height: .64rem;
    text-align: center;
    border-radius: 50%;
    font-size: .36rem;
    color: #fff;
    top: .35rem;
    position: absolute;
    z-index: 2;
}

header .down {
    left: .4rem;
}

header .collection {
    right: 1.12rem;
}

header .share {
    right: .37rem;
}

header .num {
    width: .89rem;
    height: .46rem;
    background-color: rgba(0, 0, 0, .2);
    border-radius: .23rem;
    position: absolute;
    right: .39rem;
    bottom: .52rem;
    text-align: center;
    font-size: .3rem;
    line-height: .6rem;
    color: #fff;
    z-index: 2;
}
.swiper-pagination-fraction {
    left: initial;
}

.top {
    margin: .39rem;
    box-sizing: border-box;
    padding: .38rem .38rem 0;
    -moz-box-shadow: 0 0 10px #ccc;
    -webkit-box-shadow: 0 0 10px #ccc;
    box-shadow: 0 0 10px #ccc;
}

.top h1 {
    font-size: .4rem;
}

.top h3 {
    color: #adada9;
    font-size: .28rem;
}

.top p {
    margin-top: .2rem;
    font-size: .3rem;
}

.top p span:nth-child(1) {
    font-size: .5rem;
    color: #ff2023;
    font-weight: 600;
}

.top p span:nth-child(2) {
    color: #ff2023;
}

.top p span:nth-child(3) {
    color: #aeaeab;
    float: right;
    position: relative;
    top: .1rem;
}

.content {
    margin: 0 .24rem;
    margin-bottom: 1.25rem;
}

.content .info {
    position: relative;
}

.content>h1 {
    font-size: .4rem;
    margin: .4rem 0 .2rem;
}

.content dl {
    font-size: .28rem;
    line-height: .58rem;
}

.content dl dt {
    width: 15%;
    float: left;
    color: #adadad;
}

.content dl dd {
    width: 35%;
    float: left;
    color: #4a4a4a;
}

.content dl::after {
    display: block;
    content: "";
    clear: both;
}

.content .info p>a {
    position: absolute;
    right: 0;
    bottom: 0;
    color: #ff2023;
    font-size: .3rem;
}

.content .facilities li {
    float: left;
    width: 20%;
    text-align: center;
    margin-bottom: .15rem;
}

.content .facilities li span {
    font-size: .45rem;
    line-height: .5rem;
    color: #000;
    display: block;
}

.content .facilities {
    margin-top: .2rem;
}

.content .facilities li p {
    font-size: .26rem;
}

.content .facilities li.none span {
    color: #ccc !important;
}

.content .facilities li.none p {
    color: #ccc;
    text-decoration: line-through;
}

.content .facilities::after {
    display: block;
    clear: both;
    content: "";
}

.content img {
    width: 100%;
    display: block;
}

footer {
    border-top: .01rem solid #d8d6d6;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 7.5rem;
    height: 1.2rem;
}

footer>div {
    width: 33.33333%;
    float: left;
    height: 100%;
}

footer .left {
    position: relative;
    // background-color: #fff;
}

footer .left p {
    font-size: .28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .25rem;
    margin-left: .2rem;
}

footer .left span {
    font-size: .24rem;
    color: #b8b8b8;
    position: absolute;
    top: .6rem;
    left: 1.1rem;
}

footer .left img {
    width: .62rem;
    height: .62rem;
    margin-top: .25rem;
    margin-left: .3rem;
}

footer .phone {
    background-color: #000;
    color: #fff;
    font-size: .34rem;
    line-height: 1.3rem;
    text-align: center;
}

footer .right {
    background-color: #ff3b3d;
    color: #fff;
    font-size: .34rem;
    line-height: 1.3rem;
    text-align: center;
}
footer a{
    width: 100%;
    height: 100%;
    display: block;
}
 
</style>
